<script setup>
import { ref } from 'vue';

const data = ref([
  {
    title: '风格配色',
    content: '整体风格配色设置',
    color: true
  },
  {
    title: '主题色',
    content: '页面风格配色：',
    color: true
  },
])
</script>
<template>
  <div class="custom">
    <h3>个性化设置</h3>
    <div class="list">
      <a-list item-layout="horizontal" :data-source="data">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta :description="item.content">
              <template #title>
                <a href="#">{{ item.title }}</a>
              </template>
            </a-list-item-meta>
            <template #actions>
              <a-switch v-model:checked="item.color" checked-children="暗色" un-checked-children="亮色" />
            </template>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </div>
</template>
